<template>
  <div style="padding: 20px">
    <div id="splist" style=" border:solid 1px black;width: 800px;BACKGROUND-COLOR: rgba(248,248,248,1);
    padding: 20px;display: flex;flex-direction: column">
      <p style="text-align: center;line-height: 0px">{{title}}单</p>
      <div style="display: flex;justify-content: space-between">
        <div style="padding-left: 10px;box-sizing: border-box;">
          <p style="line-height: 0px" v-if="form.inShopName">调入门店：{{form.inShopName}}</p>
          <p style="line-height: 0px" v-if="sendForm.memberName">客户名称：{{sendForm.memberName}}</p>
          <p style="line-height: 0px" v-if="sendForm.supplierName">客户名称：{{sendForm.supplierName}}</p>
          <div style="display: flex;width: 360px">
            <p v-if="form.outShopName">调出门店：{{form.outShopName}}</p>
            <p v-if="form.address">收货地址：</p>
            <div style="width: 260px" v-if="form.address"> <p>{{form.address}}</p><p style="line-height: 0px">{{form.consignee}}（{{form.phone}}）</p></div>
          </div>
          <p style="line-height: 0px">{{memoName}}备注：{{form.memo}}</p>
        </div>
        <div style="display: flex;flex-direction: column;justify-content: space-between">
          <p style="line-height: 0px">{{title}}日期：{{form.orderDate|dateFormatter}}</p>
          <p style="line-height: 0px">{{title}}单号：{{form.sn}}</p>
          <p style="line-height: 0px">所属部门：{{sendForm.officeName}}</p>
          <p style="line-height: 0px" v-if="isShipping" >业务代表：{{sendForm.operatorName}}</p>
        </div>
      </div>
      <table border="1" cellspacing="0" width="760px">
        <tr>
          <td width="120px">商品条码</td>
          <td width="120px">商品名称</td>
          <td width="120px">规格</td>
          <td width="50px">单位</td>
          <td width="50px">数量</td>
          <td width="80px">单价</td>
          <td width="80px">金额</td>
          <td width="80px">优惠</td>
          <td width="180px">备注</td>
        </tr>
        <tr v-for="item in form.itemList">
          <td width="120px">{{item.sn}}</td>
          <td width="120px">{{item.name}}</td>
          <td width="120px">{{item.spec}}</td>
          <td width="50px">{{item.unit}}</td>
          <td width="50px">{{item.quantity}}</td>
          <td width="80px">{{item.price}}</td>
          <td width="80px">{{item.amount}}</td>
          <td width="80px">{{item.discount}}</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="4">合计</td>
          <td>{{allQuantity}}</td>
          <td></td>
          <td>{{allAmount}}</td>
          <td>{{allDiscount}}</td>
          <td></td>
        </tr>
      </table>
      <div  style="display: flex;justify-content: space-between;padding-right: 100px;margin-top: 10px">
        <div>
          <p style="line-height: 20px" v-if="isShipping">送货人：</p>
          <p style="line-height: 0px">{{sysMchName}}</p>
        </div>
        <div>
          <p style="line-height: 20px" v-if="isShipping">应收合计：{{allAmount}}</p>
          <p style="line-height: 0px">{{signName}}签字：</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getInfo} from '@/api/sysMch'
  import { getLodop,loadCLodop}  from '@/utils/lodop'
  import {find} from '@/api/order'

  export default {
    name: 'lodopOrder',
    data(){
      return{
        isShow:false,
        allQuantity:0,
        allDiscount:0,
        sysMchName:'',
        allAmount:0,
      }
    },
    props:['sendForm','title','isShipping','form','signName','memoName'],
    created() {
      loadCLodop()
      this.getMchName()
      this.form.itemList.forEach(item=>{
        this.allQuantity+=item.quantity
        this.allAmount+=item.amount
        if (item.discount){
          this.allDiscount+=item.discount
        }

      })

    },
    methods:{
      getMchName(){
        getInfo().then(res=>{
          this.sysMchName=res.data.name
        })
      },
      printPdf(){
        // 查询数据
        let  LODOP = getLodop();
        if (LODOP==true||LODOP=='undefined'){
          this.isShow=true
        }
        console.log(LODOP)
        this.$emit('isTeach', this.isShow)
        if (LODOP!=true&&LODOP!='undefined'){
          // LODOP.PRINT_INIT("订货单");
          // LODOP.PRINT_DESIGN()
          LODOP.SET_PRINT_STYLE("FontSize", 1);
          // LODOP.SET_PRINT_STYLE("Bold", 1);
          // CreateOnePage()
          LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "90%");
          // LODOP.SET_PRINT_PAGESIZE(1,57,0,'');
          LODOP.ADD_PRINT_HTM(88, 20, 400, 800, document.getElementById("splist").innerHTML);
          // LODOP.PRINT();
          LODOP.PREVIEW();
        }
      },
    }
  }
</script>

<style scoped>

</style>
